<script setup lang="ts">
import { evaluateDoctor } from '@/api/consult'
import type { ConsultOrderItem } from '@/types/consult'
import type { EvaluateDoctorForm } from '@/types/room'
import { showFailToast, showLoadingToast, showSuccessToast } from 'vant'
import { computed, type Ref } from 'vue'
import { inject } from 'vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const props = defineProps<{
  id: string | number
  score?: number
}>()

const route = useRoute()

const orderInfo = inject<Ref<ConsultOrderItem>>('orderInfo')
const form = ref<EvaluateDoctorForm>({
  docId: orderInfo?.value.docInfo.id, // 评价医生的id
  orderId: route.query.orderId as string, // 订单id
  score: 0, // 分数
  content: '', // 评价内容
  anonymousFlag: 0 // 匿名标志
})

const flag = computed({
  get() {
    return !!form.value.anonymousFlag
  },
  set(value) {
    form.value.anonymousFlag = +value
  }
})

// 提交评价
const updateEvaCardFn = inject('updateEvaCard')
const submit = async () => {
  // 1. 校验
  if (!form.value.score) return showFailToast('请选择分数')
  if (!form.value.content) return showFailToast('请填写评价内容')
  if (!orderInfo?.value.docInfo.id) return showFailToast('当前没有医生的id')

  // 2. 调接口
  showLoadingToast({
    message: '提交中，请稍后...',
    duration: 0
  })
  const res = await evaluateDoctor(form.value)
  // 3. 提示结果
  showSuccessToast('评价成功')
  // 4. 前端同步数据（数据在祖先index.vue组件）
  // @ts-ignore
  updateEvaCardFn(props.id, res.data)
}
</script>

<template>
  <div class="evaluate-card" v-if="score">
    <p class="title">医生服务评价</p>
    <p class="desc">我们会更加努力提升服务质量</p>
    <van-rate
      :modelValue="3"
      size="7vw"
      gutter="3vw"
      color="#FADB14"
      void-icon="star"
      void-color="rgba(0,0,0,0.04)"
    />
  </div>
  <div class="evaluate-card" v-else>
    <p class="title">感谢您的评价</p>
    <p class="desc">本次在线问诊服务您还满意吗？</p>
    <van-rate
      v-model="form.score"
      size="7vw"
      gutter="3vw"
      color="#FADB14"
      void-icon="star"
      void-color="rgba(0,0,0,0.04)"
    />
    <van-field
      v-model="form.content"
      type="textarea"
      maxlength="150"
      show-word-limit
      rows="3"
      placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
    ></van-field>
    <div class="footer">
      <van-checkbox v-model="flag" @click="submit">匿名评价</van-checkbox>
      <van-button type="primary" size="small" round> 提交评价 </van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.evaluate-card {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding: 15px;
  .title {
    font-size: 15px;
    margin-bottom: 5px;
  }
  .desc {
    font-size: 12px;
    margin-bottom: 15px;
    color: var(--cp-tip);
  }
  .van-field {
    background-color: var(--cp-bg);
    margin: 15px 0;
    border-radius: 8px;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    :deep() {
      .van-checkbox {
        .van-icon {
          font-size: 12px;
        }
        &__label {
          font-size: 12px;
          color: var(--cp-tip);
        }
        height: 16px;
      }
      .van-button {
        padding: 0 16px;
        &.disabled {
          opacity: 1;
          background: #fafafa;
          color: #d9dbde;
          border: #fafafa;
        }
      }
    }
  }
}
</style>
